<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>起始页面(菜单页)</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<style>
			html, body {
				background-color: #f8f8f8;
			}
			#main {
				padding: 15px 15px 0;
			}
			#main > div:nth-child(2) {
				margin-top: 10px;
			}
			/* 菜单样式 */
			.start-menu-container > div:nth-child(1) {
				margin-right: 7.5px;
			}
			.start-menu-container > div:nth-child(2) {
				margin-left: 7.5px;
			}
			/* 菜单的每个item的样式 */
			.start-menu-item {
				background-color: #fff;
				min-width:100px;
			}
			.start-menu-item-icon {
				width: 40px;
				height: 40px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 40px 40px;
			}
			.start-menu-item-icon-1 {
				background-image: url(../image/icon_menu_item_1.png);
			}
			.start-menu-item-icon-2 {
				background-image: url(../image/icon_menu_item_2.png);
			}
			.start-menu-item-icon-3 {
				background-image: url(../image/icon_menu_item_3.png);
			}
			.start-menu-item-icon-4 {
				background-image: url(../image/icon_menu_item_4.png);
			}
			.start-menu-item-title {
				margin-top: 10px;
			}
			.top-nav-right{
				font-size: 15px;
				width: 70px;
				text-align: center;
			}
			.start-journal{
				background-color: #fff;
				height: 150px;
				text-align: center;
			}
			.start-journal-legt{
				width: 100%;
				height: 40px;
				background-repeat: no-repeat;
				background-position: center;
				background-size: 40px 40px;
				background-image: url(../image/icon_menu_item_1.png);
				-webkit-box-align: center;
				position: absolute;
				bottom: 50%;
			}
			#exit-this-wgt{
				width: 70px;
			}
		</style>
	</head>
	<body>
		<header class="top-header">
			<div class="top-nav-content flex-container flex-between flex-center-v">
				<div id="exit-this-wgt" class="icon-arrow-left"></div>
				<div>
					故障上报
				</div>
				<div class="top-nav-right"></div>
			</div>
		</header>
		<div id="main">
			<!-- 具备管理员权限显示的布局 -->
			<div class="flex-container flex-between start-menu-container">
				<div id="btn-1" class="start-menu-item flex-container flex-vertical flex-center-v flex-center-h flex-item">
					<div class="start-menu-item-icon start-menu-item-icon-1"></div>
					<div class="start-menu-item-title">
						<nobr>故障上报</nobr>
					</div>
				</div>
				<div id="btn-2" class="start-menu-item flex-container flex-vertical flex-center-v flex-center-h flex-item">
					<div class="start-menu-item-icon start-menu-item-icon-2"></div>
					<div class="start-menu-item-title">
						<nobr>接障处理</nobr>
					</div>
				</div>
			</div>
			<!-- 具备平障人员权限显示的布局 -->
			<div class="flex-container flex-between start-menu-container">
				<div id="btn-3" class="start-menu-item flex-container flex-vertical flex-center-v flex-center-h flex-item">
					<div class="start-menu-item-icon start-menu-item-icon-3"></div>
					<div class="start-menu-item-title">
						<nobr>平障处理</nobr>
					</div>
				</div>
				<div id="btn-4" class="start-menu-item flex-container flex-vertical flex-center-v flex-center-h flex-item">
					<div class="start-menu-item-icon start-menu-item-icon-4"></div>
					<div class="start-menu-item-title">
						<nobr>故障统计</nobr>
					</div>
				</div>
			</div>
			<div class="flex-container flex-between start-menu-container" style="margin-top:10px;">
				<div id="btn-5" class="start-menu-item flex-container flex-vertical flex-center-v flex-center-h flex-item">
					<div class="start-menu-item-icon start-menu-item-icon-1"></div>
					<div class="start-menu-item-title">
						<nobr>提交日志</nobr>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/common.js"></script>
	<script type="text/javascript">
		apiready = function() {
			//适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
			$api.fixStatusBar($api.dom('header'));
			//监听window显示到屏幕的事件，显示再计算。
			api.addEventListener({
				name : 'viewappear'
			}, function(ret, err) {
				initView(initDatas());
				setBackListener();
			});

		};
		function initDatas() {
			//1.故障上报 2.接障处理 3.平障处理  4.故障统计
			//存放模块的中文名
			var modules = []
			var list = api.pageParam;
			for (var i = 0; i < list.length; i++) {
				modules.push(list[i].id);
			}
			return modules;
		}

		function initView(datas) {
			var doc = document;
			var menuItem = doc.getElementsByClassName('start-menu-item');
			var btnExit = doc.getElementById('exit-this-wgt');
			var topRight = doc.getElementsByClassName('top-nav-right')[0];
			//故障上报按钮
			var btn1 = doc.getElementById('btn-1');
			//平障处理
			var btn2 = doc.getElementById('btn-2');
			//平障处理
			var btn3 = doc.getElementById('btn-3');
			//故障统计
			var btn4 = doc.getElementById('btn-4');

			//故障统计
			var btn5 = doc.getElementById('btn-5');

			setMenuItemWH(menuItem);
			btnExit.onclick = function() {
				MyCom.closeThisWgt();
				api.sendEvent({
				    name: 'app_equipment',
				    extra: {
				        type: 229,
				    }
				});


			}
			console.log(JSON.stringify(datas))
			//判断是否有该模块，是，可以点击，反之，不可点击，并提示用户。
			btn1.onclick = function() {//故障上报
				if (datas.indexOf(1) != -1) {
					openW('./complaint_comit.html', 'complaint_comit');
				} else {
					thisToast();
				}
			}
			btn2.onclick = function() {
				if (datas.indexOf(2) != -1) {//接障处理
					openW('./send_order/send_order.html', 'send_order');
				} else {
					thisToast();
				}
			}
			btn3.onclick = function() {
				if (datas.indexOf(3) != -1) {//平障处理
					openW('./deal_order/deal_order.html', 'deal_order');
				} else {
					thisToast();
				}
			}
			btn4.onclick = function() {
				if (datas.indexOf(4) != -1) {//故障统计
					openW('./complaint_statistics/complaint_statistics.html', 'complaint_statistics');
				} else {
					thisToast();
				}
			}

			btn5.onclick = function() {
				api.sendEvent({
						name: 'app_equipment',
						extra: {
								type: 338,
						}
				});
			}

      topRight.onclick = function(){
           api.sendEvent({
               name: 'app_equipment',
               extra: {
                   type: 338,
               }
           });
			}

		  if(datas.indexOf(1) == -1){
				btn1.style.display='none';
			}
			if(datas.indexOf(2) == -1){
				btn2.style.display='none';
			}
			if(datas.indexOf(3) == -1){
				btn3.style.display='none';
			}
			if(datas.indexOf(4) == -1){
				btn4.style.display='none';
			}

			if(datas.length > 1){
				btn5.style.width = (api.winWidth)/2 + 'px';
			}

		}

		/**
		 * 设置菜单的item的宽高为相等
		 * @param{Object} views - DOM对象数组
		 */
		function setMenuItemWH(views) {
			var len = views.length;
			var i = 0;
			for (; i < len; i++) {
				views[i].style.height = (api.winWidth)/2 + 'px';
				views[i].style.width = (api.winWidth)/2 + 'px';
			}
		}

		function thisToast() {
			api.toast({
				msg : '您没有该权限'
			});
		}

		/**
		 * 打开页面，并禁止新页面在ios中右滑返回上一页
		 * @param{String} fmUrl - 页面相对url
		 * @param{String} fmName - 页面名
		 */
		function openW(fmUrl, fmName) {
			api.openWin({
				name : fmName,
				url : fmUrl
			});
		}

		/**
		 * 对此页面的虚拟返回键，做处理
		 */
		function setBackListener() {
			api.addEventListener({
				name : 'keyback'
			}, function(ret, err) {
				MyCom.closeThisWgt();
				api.sendEvent({
						name: 'app_equipment',
						extra: {
								type: 229,
						}
				});
			});
		}
	</script>
</html>
